<!-- 功能：路由设置 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月12日 23:59:33 -->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane :key="'kongzhiqi_'+ index" :tab="'控制器-'+index" v-for="index in 3">
      <a-row>
        <a-col :span="24">
          <a-button type="link" class="y-btn" @click="openXinZengJingTaiLuYouModal">
            <template #icon>
              <plus-outlined />
            </template>
            新增静态路由
          </a-button>
          <!-- 弹窗 - 新增静态路由 -->
          <xinZengJingTaiLuYouModal v-model:visible="visibleXinZengJingTaiLuYouModal"></xinZengJingTaiLuYouModal>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-alert banner message="说明: 修改网络参数会重启网络,可能造成数据传输中断或错误,修改时请确保服务停止或未使用!" type="warning" show-icon />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <a-table bordered :data-source="dataSource" :columns="columns" class="y-table" :pagination="pagination"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import xinZengJingTaiLuYouModal from './modal/xinZengJingTaiLuYouModal.vue'

const visibleXinZengJingTaiLuYouModal = ref(false)

const openXinZengJingTaiLuYouModal = () => {
  visibleXinZengJingTaiLuYouModal.value = true
}

const activeKey = ref('kongzhiqi_1')

// 表格列
const columns = ref([
  {
    title: '端口',
    dataIndex: 'port',
    key: 'port',
    align: 'center',
    sorter: {
      compare: (a, b) => a.port.localeCompare(b.port),
      multiple: 1
    }
  },
  {
    title: '网络设置',
    dataIndex: 'networdSetting',
    key: 'networdSetting',
    align: 'center',
    sorter: {
      compare: (a, b) => a.networdSetting.localeCompare(b.networdSetting),
      multiple: 2
    }
  },
  {
    title: '掩码',
    dataIndex: 'yanMa',
    key: 'yanMa',
    align: 'center',
    sorter: {
      compare: (a, b) => a.yanMa.localeCompare(b.yanMa),
      multiple: 3
    }
  },
  {
    title: '网关',
    dataIndex: 'wangGuan',
    key: 'wangGuan',
    align: 'center',
    sorter: {
      compare: (a, b) => a.wangGuan.localeCompare(b.wangGuan),
      multiple: 4
    }
  }
])

// 表格数据
const dataSource = ref([
  {
    key: '1',
    port: '192.168.1.1',
    networdSetting: '192.168.1.1/24',
    yanMa: '255.255.255.0',
    wangGuan: '192.168.1.1'
  },
  {
    key: '2',
    port: '192.168.1.2',
    networdSetting: '192.168.1.2/24',
    yanMa: '255.255.255.0',
    wangGuan: '192.168.1.2'
  }
])

// 分页
const pagination = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('DNS设置分页改变>>', page, pageSize)
  }
}
</script>

<style scoped lang='scss'>
</style>